<template>
  <el-dialog :visible.sync="dialogVisible"
             title="选择服务方"
             center
             width="950px"
  >
    <el-form ref="searchForm" class="el-form-s" :model="search" label-width="80px" label-position="left">
      <el-row :gutter="15" style="margin-bottom: 20px">
        <el-col :span="6">
          <el-input v-model="search.workerName" placeholder="姓名"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="search.workerPhone" placeholder="手机号"></el-input>
        </el-col>
        <el-col :span="6">
          <cascade-address changeOnSelect placeholder="服务地区" :level="2"
                           v-model="search.address"></cascade-address>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="searchFunc(search)"> 查 找</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table
            :data="mergeData"
            border
            :span-method="objectSpanMethod"
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align': 'center'}"
            stripe>
            <el-table-column
              prop="workerName"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="workerPhone"
              width="115"
              label="手机号">
            </el-table-column>
            <el-table-column
              prop="address"
              width="170"
              label="服务范围">
              <template slot-scope="scope">
                {{scope.row.provice}}/{{scope.row.city}}
              </template>
            </el-table-column>
            <el-table-column
              prop="serviceLevel"
              label="服务等级">
            </el-table-column>
            <el-table-column
              prop="businessName"
              label="业务类型">
            </el-table-column>
            <el-table-column
              width="270"
              prop="serviceName"
              label="服务类型">
            </el-table-column>
            <el-table-column
              width="60"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="checkFun(scope.row)">选择</el-button>
                <!--<a href="javascript:;"  style="color: #26a1ab;"-->
                <!--@click="checkFun(scope.row)"></a>-->
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <div class="pull-right" style="margin: 15px 0px">
      <pagination :total-item="totalItem" @sizeChange="sizeChange" @pagination="pagination"
                  :per-item="search.pageSize"></pagination>
    </div>
    <div class="clearfix"></div>
  </el-dialog>
</template>
<script>
import Pagination from '@/components/Pagination'
import {copy} from '@/utils'
import lodash from 'lodash'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      dialogVisible: false,
      totalItem: 0,
      search: {
        pageSize: 10,
        pageNum: 1
      },
      tableData: []
    }
  },
  computed: {
    mergeData() {
      return lodash.flatten(this.tableData.map((v, i) => {
        if (Array.isArray(v.servicesList)) {
          return v.servicesList.map((item, j) => Object.assign({}, item, v, {
            index: i + 1,
            showFlag: j === 0,
            mergeLength: v.servicesList.length
          }))
        } else {
          return Object.assign({}, v, {
            index: i + 1,
            showFlag: true,
            mergeLength: 1
          })
        }
      }))
    }
  },
  methods: {
    searchFunc(search) {
      let params = copy(search, true)
      // 处理地址
      if (params.address && params.address.length) {
        params.provinceNo = params.address[0].id
        params.cityNo = params.address[1] ? params.address[1].id : ''
        delete params.address
      } else {
        params.provinceNo = ''
        params.cityNo = ''
      }
      this.search = params
      this.httpGetTable()
    },
    show() {
      this.dialogVisible = true
      this.httpGetTable()
    },
    hide() {
      this.dialogVisible = false
    },
    sizeChange(size) {
      this.search.pageSize = size
      this.httpGetTable()
    },
    pagination(page) {
      this.search.pageNum = page
      this.httpGetTable()
    },
    httpGetTable() {
      this.$ajax.table('/ms-fahuobao-order/FhbMyWorker/findMyWorkerList', this.search).then(response => {
        this.tableData = response.data || []
        this.totalItem = response.totalItem
      })
    },
    checkFun(data) {
      this.$emit('editWorker', data)
      this.hide()
    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      // 要合并的列 type:index
      let columnIndependent = ['businessName', 'serviceName']
      if (columnIndependent.indexOf(column.property) < 0) {
        if (row.showFlag) {
          return {
            rowspan: row.mergeLength,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>
